import React, { useState, forwardRef, useImperativeHandle, useEffect, useMemo } from "react"

import {
    Button,
    Checkbox,
    Divider,
    Drawer,
    Empty,
    Form,
    Icon,
    ImgDefault,
    Input,
    InputNumber,
    message,
    Modal,
    Popover,
    Progress,
    Radio,
    Select,
    Space,
    Spin,
    Steps,
    Switch,
    Tooltip,
    ImgUpload
} from "@bytedance/mona-ui"
import db from "@tools/indexDB";
import type { UploadFile, UploadChangeParam } from '@bytedance/mona-ui/es/components/img-upload';
const { Option } = Select;
const { TextArea } = Input;

function SkuBox(props: any, ref: any) {
    const [radioState, setRadioState] = useState(1)
    const [setTypeStatus, setSetTypeStatus] = useState(1)
    const [checkList, setCheckList] = useState([])
    const infoConfigData = {
        setTypeStatus: 1,
        radioState: '1',
        fangweiConfig: {

            fanweitype: 1,
            setSkuName: 1,
            chazhaozi: {
                selectType: '1',
                titleContent: ''
            },
            gaodisku2: 1,
            gaodisku3: 1
        },
        wuchaozhuoConfig: {
            conf1: false,
            text1: '30',
            conf2: false,
            text2: '',
            conf3: false,
            conf4: false,
        },
        configType1: 100,
        configType1Status: false,
        configType2: {
            baifengbi: 100,
            jiajiageyuan: 0,
            jianjiajiageyuan: 0,
            chengzuizhong: 0
        },
        configType2Status: false,
        configType3: 9,
        configType3Status: false,
    }
    const [setConfigObj, setSetConfigObj] = useState(null)
    useImperativeHandle(ref, () => ({
        setConfigObj
    }))

    useMemo(() => {
        db.copyProductConfig.where('funcname').equals('dly-setConfigObj-sku').toArray().then((res) => {
            if (res[0] && res[0].data) {
                setSetConfigObj(res[0].data)
            } else {
                setSetConfigObj(infoConfigData)
            }
        }).catch(err => {
            setSetConfigObj(infoConfigData)
        })
    }, [props])
    useEffect(() => {
        if (setConfigObj) {
            db.copyProductConfig.put({
                funcname: 'dly-setConfigObj-sku',
                data: setConfigObj
            })
        }

    }, [setConfigObj])

    function Func1() {
        return <Space direction="vertical">
            <Space>
                <span>使用新价格:</span>
                <InputNumber size="small" min={0.01} defaultValue={setConfigObj.configType1} onBlur={(e: any) => {
                    setConfigObj.configType1 = e.target.value
                    setSetConfigObj({ ...setConfigObj })
                }}></InputNumber>
            </Space>

        </Space>

    }
    function Func2() {
        return <Space direction="vertical">
            <Space>
                <span>使用公式:</span>
                <Space>
                    (<span>售价</span>X
                    <Input size="small" style={{
                        width: 100
                    }} addonAfter="%" defaultValue={setConfigObj.configType2.baifengbi} onBlur={(e: any) => {
                        if (setConfigObj.configType2.baifengbi == e.target.value) return
                        setConfigObj.configType2.baifengbi = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }}></Input>+
                    <Input size="small" style={{
                        width: 100
                    }} defaultValue={setConfigObj.configType2.jiajiageyuan} onBlur={(e: any) => {
                        if (setConfigObj.configType2.jiajiageyuan == e.target.value) return
                        setConfigObj.configType2.jiajiageyuan = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }} addonAfter="元"></Input>-

                    <Input size="small" style={{
                        width: 100
                    }} defaultValue={setConfigObj.configType2.jianjiajiageyuan} onBlur={(e: any) => {
                        if (setConfigObj.configType2.jianjiajiageyuan == e.target.value) return
                        setConfigObj.configType2.jianjiajiageyuan = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }} addonAfter="元"></Input>)X
                    <Input size="small" style={{
                        width: 100
                    }} addonAfter="%" defaultValue={setConfigObj.configType2.chengzuizhong} onBlur={(e: any) => {
                        if (setConfigObj.configType2.chengzuizhong == e.target.value) return
                        setConfigObj.configType2.chengzuizhong = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }}></Input>
                </Space>
            </Space>

        </Space>
    }
    function Func3() {


        return <Space align="start">
            <span>仅修改小数:</span>
            <Space direction="vertical">
                <InputNumber size="small" min={0} max={99} defaultValue={setConfigObj.configType3} onBlur={(e: any) => {
                    if (setConfigObj.configType3 == e.target.value) return
                    setConfigObj.configType3 = e.target.value
                    setSetConfigObj({ ...setConfigObj })
                }}></InputNumber>
                <span style={{
                    fontSize: 12,
                    color: '#9d9d9d',
                }}>说明：批量修改小数点后的数字。例如商品价格为15.45，设置9，商品价格为15.9</span>
            </Space>

        </Space>
    }

    if (!setConfigObj) return null

    return <Space direction="vertical" style={{
        width: '100%'
    }}>
        <h4>价格(SKU)</h4>

        <Radio.Group value={setConfigObj.setTypeStatus} onChange={(e) => {
            setSetConfigObj({ ...setConfigObj, setTypeStatus: e.target.value })
        }}>
            <Radio value={1}>单独设置</Radio>
            <Space size={0}>
                <Radio value={2}>混合设置</Radio>
                <span style={{
                    fontSize: 12,
                    color: '#999'
                }}>(根据裂变数量随机使用选中并设置的项进行设置)</span>
            </Space>
        </Radio.Group>

        <Space align="start" style={{
            width: '100%'
        }}>
            <span>修改范围：</span>
            <Space direction="vertical" style={{
                width: '100%'
            }}>

                <Radio.Group value={setConfigObj.fangweiConfig.fanweitype} onChange={(e: any) => {
                    setConfigObj.fangweiConfig.fanweitype = e.target.value
                    setSetConfigObj({ ...setConfigObj })
                }}>
                    <Radio value={1}>全部SKU</Radio>
                    <Radio value={2}>最低价SKU</Radio>
                    <Radio value={3}>最高价SKU</Radio>
                </Radio.Group>
                {setConfigObj.fangweiConfig.fanweitype == 2 && <Space>
                    <span>若有多个最低价SKU:</span>
                    <Radio.Group value={setConfigObj.fangweiConfig.gaodisku2} onChange={(e: any) => {
                        setConfigObj.fangweiConfig.gaodisku2 = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }}>
                        <Radio value={1}>按顺序修改首个SKU </Radio>
                        <Radio value={2}>修改全部最低价SKU</Radio>
                    </Radio.Group>
                </Space>}
                {setConfigObj.fangweiConfig.fanweitype == 3 && <Space>
                    <span>若有多个最高价SKU:</span>
                    <Radio.Group value={setConfigObj.fangweiConfig.gaodisku3} onChange={(e: any) => {
                        setConfigObj.fangweiConfig.gaodisku3 = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }}>
                        <Radio value={1}>按顺序修改首个SKU</Radio>
                        <Radio value={2}>修改全部最高价SKU</Radio>
                    </Radio.Group>
                </Space>}
                <Radio.Group value={setConfigObj.fangweiConfig.setSkuName} onChange={(e: any) => {
                    setConfigObj.fangweiConfig.setSkuName = e.target.value
                    setSetConfigObj({ ...setConfigObj })
                }}>
                    <Radio value={1}>针对所有的SKU规格名称</Radio>
                    <Space style={{
                        width: 400
                    }}>
                        <Radio value={2}></Radio>
                        <Input.Group compact style={{
                            width: 700
                        }} >
                            <Select defaultValue={setConfigObj.fangweiConfig.chazhaozi.selectType} style={{
                                width: 240
                            }} onChange={(e: any) => {
                                setConfigObj.fangweiConfig.chazhaozi.selectType = e
                                setSetConfigObj({ ...setConfigObj })
                            }} size="small">
                                <Select.Option value="1">SKU规格名称包含关键字</Select.Option>
                                <Select.Option value="2">SKU规格名称不包含关键字</Select.Option>
                                <Select.Option value="3">SKU规格名称精准为</Select.Option>
                                <Select.Option value="4">SKU备注包含关键字</Select.Option>
                                <Select.Option value="5">SKU备注不包含关键字</Select.Option>
                                <Select.Option value="6">SKU备注精准为</Select.Option>
                            </Select>
                            <Input placeholder="多个关键字用“英文逗号”隔开，最多输入100个" wrapperStyle={{ width: '50%' }} size="small" defaultValue={setConfigObj.fangweiConfig.chazhaozi.titleContent} onChange={(e: any) => {
                                setConfigObj.fangweiConfig.chazhaozi.titleContent = e.target.value
                                setSetConfigObj({ ...setConfigObj })
                            }} />
                        </Input.Group>
                    </Space>
                </Radio.Group>
            </Space>


        </Space>

        {setConfigObj.setTypeStatus === 1 && <Radio.Group value={setConfigObj.radioState} onChange={(e) => {
            setSetConfigObj({ ...setConfigObj, radioState: e.target.value })
        }}>
            <Space direction="vertical">
                <Space align="start" size={4}><Radio value={'1'} /> <Func1 /></Space>
                <Space align="start" size={4}><Radio value={'2'} /> <Func2 /></Space>
                <Space align="start" size={4}><Radio value={'3'} /> <Func3 /></Space>


            </Space>
        </Radio.Group>}
        {setConfigObj.setTypeStatus === 2 && <Space direction="vertical" align="start">
            <Space align="start">
                <Checkbox checked={setConfigObj.configType1Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType1Status: e.target.checked })
                }}></Checkbox> <Func1 />
            </Space>
            <Space align="start">
                <Checkbox checked={setConfigObj.configType2Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType2Status: e.target.checked })
                }} /> <Func2 />
            </Space>
            <Space align="start">
                <Checkbox checked={setConfigObj.configType3Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType3Status: e.target.checked })
                }} /> <Func3 />
            </Space>

        </Space>}

        <Space align="start">
            <span>误操作防范</span>
            <Space direction="vertical">
                <Space>
                    <Checkbox defaultChecked={setConfigObj.wuchaozhuoConfig.conf1} onChange={(e) => {
                        setConfigObj.wuchaozhuoConfig.conf1 = e.target.checked
                        setSetConfigObj({ ...setConfigObj })
                    }}></Checkbox>
                    <Input size="small" addonBefore="新价格不低于原来" addonAfter="%" defaultValue={setConfigObj.wuchaozhuoConfig.text1} onChange={(e) => {
                        setConfigObj.wuchaozhuoConfig.text1 = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }} />
                </Space>
                <Space>
                    <Checkbox defaultChecked={setConfigObj.wuchaozhuoConfig.conf2} onChange={(e) => {
                        setConfigObj.wuchaozhuoConfig.conf2 = e.target.checked
                        setSetConfigObj({ ...setConfigObj })
                    }}></Checkbox>
                    <Input size="small" addonBefore="新价格不低于原来" addonAfter="元" defaultValue={setConfigObj.wuchaozhuoConfig.text2} onChange={(e) => {
                        setConfigObj.wuchaozhuoConfig.text2 = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }} />
                </Space>
                <Space>
                    <Checkbox defaultChecked={setConfigObj.wuchaozhuoConfig.conf3} onChange={(e) => {
                        setConfigObj.wuchaozhuoConfig.conf3 = e.target.checked
                        setSetConfigObj({ ...setConfigObj })
                    }}></Checkbox>
                    <span>若修改商品价格(SKU)后，划线价低于商品最高价(SKU)，自动调整：划线价等于商品规格最高价</span>
                </Space>
                <Space>
                    <Checkbox defaultChecked={setConfigObj.wuchaozhuoConfig.conf4} onChange={(e) => {
                        setConfigObj.wuchaozhuoConfig.conf4 = e.target.checked
                        setSetConfigObj({ ...setConfigObj })
                    }}></Checkbox>
                    <span>若修改商品价格(SKU)后，SPU售卖价不再在SKU最低价和最高价之间，自动调整：售卖价=SKU最低价</span>
                </Space>
            </Space>
        </Space>
    </Space>
}
export default forwardRef(SkuBox)